﻿#contenthost {
    height: 100%;
    width: 100%;
}

.fragment {
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

    .fragment header[role=banner] {
        /* Define a grid with columns for the back button and page title. */
        -ms-grid-columns: 37px 83px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        .fragment header[role=banner] .win-navigation-backbutton {
            -ms-grid-column: 2;
            margin-top: 57px;
            position: relative;
            z-index: 1;
        }

        .fragment header[role=banner] .titlearea {
            -ms-grid-row-align: center;
        }

            .fragment header[role=banner] .titlearea .pagetitle {
                width: calc(100% - 20px);
            }

    .fragment section[role=main] {
        -ms-grid-row: 2;
    }

/*  grouped items page
    -----------------------------------------------------*/

    .groupeditemspage .titlearea {
        -ms-grid-column-span: 2;
        -ms-grid-column: 2;
        margin-left: 10px;
        text-transform: uppercase;
    }

    .locale {
        height: 550px;
        width: 200px;
        padding: 10px;
    }

    .zip {
        font-size: 3em;
        display: block;
    }

    .city:after {
        content: ', ';
    }


/*  item detail page
    -----------------------------------------------------*/

    .itemdetail .pagetitle {
        -ms-grid-row-align: end;
        line-height: 1em;
    }

    .pagesubtitle {
        font-size: 18px;
    }

    .pagetitle {
    }

    .itemdetailpage .titlearea {
        -ms-grid-column: 3;
    }

    .infographics {
        display: -ms-grid;
        -ms-grid-rows: 92px 1fr 120px;
        -ms-grid-columns: 1fr 1fr 1fr;
    }

    #populationTitle {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    #commuteTitle {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    #housingTitle {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
    }

    #population {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }

    #commute {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }

    #housing {
        -ms-grid-row: 2;
        -ms-grid-column: 3;
        width: 50%;
        -ms-grid-column-align: center;
        text-align: center;
    }


/*  population graph
    -----------------------------------------------------*/

    .genderByAge {
        display: -ms-grid;
        -ms-grid-rows: 33px;
        -ms-grid-columns: 50px 1fr 1fr;
    }

    .female {
        -ms-grid-column: 2;
        -ms-grid-column-align: end;
        background-color: #E51BD0;
        transform: scale(2, 1);
        transform-origin: 100%;
    }

    .male {
        -ms-grid-column: 3;
        background-color: #06BAF9;
        transform: scale(2, 1);
        transform-origin: 0%;
    }

/*  commute graph
    -----------------------------------------------------*/

    #commuteGraph {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 100px 100px 100px;
    }

    .commuteBy {
        display: -ms-grid;
        -ms-grid-columns: 100px 1fr;
        -ms-grid-rows: 100px;
    }

    .circle {
        background-color: #A5ED0F;
        background-size: contain;
        border-radius: 69px;
        -ms-grid-row-align: center;
        -ms-grid-column-align: center;
        transform: scale(1.5, 1.5);
        transform-origin: 50% 0px;
        min-width: 30px;
        min-height: 30px;
    }

    .value {
        -ms-grid-column: 2;
        -ms-grid-row: 1;
        -ms-grid-row-align: center;
        font-size: 3em;
        margin-left: 1em;
    }


/*  housing graph
    -----------------------------------------------------*/

    #housingGraph {
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr;
        -ms-grid-rows: 300px;
    }

    .own {
        background-color: #F71818;
        -ms-grid-row-align: end;
        -ms-grid-row: 1;
    }

    .rent {
        background-color: #F3CF04;
        -ms-grid-column: 2;
        -ms-grid-row: 1;
        -ms-grid-row-align: end;
    }

    .housingValue {
        font-size: 2em;
        transform: translate(0px, -55px);
    }

    .housingLabel {
        transform: translate(0px, -50px);
        display:block;
    }


/*  satellite
    -----------------------------------------------------*/

    .satellite {
        height: 100%;
        width: 100%;
        position: fixed;
        background-size: cover;
        opacity: 0;
        animation-name: kenburns;
        animation-duration: 10s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

    @keyframes kenburns {
        0% {
            opacity: 0;
        }

        15% {
            opacity: 0.25;
        }

        100% {
            transform: scale(1.15, 1.15) translate(5%, 5%);
            opacity: 0.25;
        }
    }

    section div, header h1 {
        position: relative;
    }


/*  finishing touches
    -----------------------------------------------------*/

    .groupeditemspage {
        background-image: radial-gradient(#0097FF 0%, #0A2149 100%);
    }

    .graphics {
        color: #00E1FF;
    }

    @font-face {
        src: url('/images/MuseoSans_500.otf') format('opentype');
        font-family: 'Museo Sans';
    }

    body {
        font-family: 'Museo Sans';
    }
    
    .infographicTitle {
        -ms-grid-row-align: end;
        -ms-grid-column-align: center;
        text-transform: uppercase;
        padding-bottom: 20px;
    }


/*  TBD: transitions???
    -----------------------------------------------------*/

    .growIn {
        transition-property: all;
        transition-duration: 0.5s;
    }

    .growX {
        transition-property: width;
        transition-duration: 0.5s;
        width: 0px;
    }

    .growY {
        height: 0px;
        transition-property: height;
        transition-duration: 0.5s;
    }
